<template>
    <div>
      <!-- 头部 -->
      <el-row :span="20">
        <div class="header">
  
        </div>
      </el-row>
       <!-- 颈部 -->
      <el-row>
        <el-col :span="5">
          <div class="left">
  
          </div>
        </el-col>
        <el-col :span="15">
          <div class="right">
          </div>
        </el-col>
      </el-row>
      <!-- 身体 -->
      <div class="boyd">
        <el-row>
        <el-col :span="5">
          <div class="left-nack">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="15">
          <div class="nack">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">
          <div class="right-nack">
          </div>
        </el-col>
      </el-row>
      </div>
      <!-- 底部 -->
      <div class="foots">
        <el-row>
        <el-col :span="4">
          <div class="left-foot">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="foot1">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="foot2">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="foot3">
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="right-foot">
          </div>
        </el-col>
      </el-row>
      </div>
      
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  .header{
    width: 100%;
    height: 30px;
    background: green;
  }
  .left{
    width: 300px;
    height: 200px;
    background-color:red;
    margin-top: 20px;
  }
  .right{
    width: 50%;
    height: 200px;
    background-color:palegreen;
    margin-top: 20px;
    margin-left: 20px;
  }
  .boyd{
    display: flex;
  }
  
  .left-nack{
    width: 200px;
    height: 300px;
    background-color:brown;
    margin-top: 20px;
  }
  .nack{
    width: 400px;
    height: 300px;
    background-color:sandybrown;
    margin-top: 20px;
  }
  .right-nack{
    width: 200px;
    height: 300px;
    background-color:brown;
    margin-top: 20px;
  }
  .foots{
    display: flex;
    margin-top: 20px;
  }
  
  .left-foot{
    width: 200px;
    height: 100px;
    background-color: red;
  }
  .foot1{
    width: 200px;
    height: 100px;
    background-color:purple;
  }
  .foot2{
    width: 200px;
    height: 100px;
    background-color:yellow;
  }
  .foot3{
    width: 200px;
    height: 100px;
    background-color:wheat;
  }
  .right-foot{
    width: 200px;
    height: 100px;
    background-color:black;
  }
  </style>